<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{
            list-style: none;
        }
        ul{
            display: flex;
            border: 1px solid red;
            justify-content: space-evenly;
            padding: 10px 0;
        }
        ul li{
            width: 24%;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
        }
        ul li img{
            width: 90%;
        }
        ul li p{
            width: 90%;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul id="goods"> 
        <!-- <li class="goods1">
            <img src="./images/g1.jpg" alt="">
            <p>姓名：阿联酋美女1号</p>
            <p>工资：10000</p>
            <p>年龄：20</p>
        </li> --> 
    </ul>
</body>
<script>
    var goodlist = [
            { id: 111, url: './images/g1.jpg', name: '阿联酋美女1号', wages: 94922, age: 20 },
            { id: 22, url: './images/g2.jpg', name: '阿联酋美女2号', wages: 21498, age: 18 },
            { id: 3325, url: './images/g3.jpg', name: '阿联酋美女3号', wages: 94398, age: 22 },
            { id: 4, url: './images/g4.jpg', name: '阿联酋美女4号', wages: 92318, age: 24 },
            { id: 5, url: './images/g3.jpg', name: '阿联酋美女5号', wages: 39888, age: 18 }
    ]
    goodlist.forEach(function(item,index){
        goods.innerHTML += `
        <li idx='${item.id}' class="goods1">
            <img src="${item.url}" alt="">
            <p>姓名：${item.name}</p>
            <p>工资：${item.wages}</p>
            <p>年龄：${item.age}</p>
        </li>
        `
    })
    var list = document.getElementsByTagName('li');
    for(var i=0;i<list.length;i++){
        list[i].onclick = function(){
            open('详情页.html?id=' + this.getAttribute('idx'));
        }
    }
</script>
</html>